<template>
  <el-container>
    <div style="
        background-color: #fff;
        margin: 20px 0;
        box-shadow: 10px 10px 18px 0 rgba(0, 0, 0, 0.12);
        border-radius: 3px;
      ">
      <el-row style="margin: 1% auto; font-size: 20px; text-align: center">流转信息</el-row>
      <!-- 头部的查询输入框 -->
      <el-form :model="temp_bussi" ref="temp_bussi" :inline="true" style="margin: 1% auto; text-align: center"
        label-width="100px">
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="权利人" prop="name">
              <el-input v-model="temp_bussi.name"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="位置" prop="houseLocation">
              <el-input v-model="temp_bussi.houseLocation"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <el-button type="primary" @click="submitForm('temp_bussi')">搜索</el-button>
              <el-button @click="resetForm('temp_bussi')">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-card style="margin-top:10px width:100%">

      <div style="width: 100%; background: white">
        <!-- <el-upload> -->
        <el-button type="primary" slot="trigger" style="">导入</el-button>
        <el-button type="primary">模板</el-button>
        <el-button type="primary" @click="addDetail" style="margin-bottom: 20px">添加</el-button>
        <el-button type="primary" @click="exportFinashExcel('temp_bussi')" style="margin-bottom: 20px">导出</el-button>
        <!-- </el-upload> -->
        <el-dialog :visible.sync="addState" center title="添加流转信息">
          <el-form :model="formInline" ref="formInline" style="text-align: center; font-size: 18px" size="medium"
            :rules="rules" label-width="100px">
            <table style="width: 100%" align="left" cellspacing="0" class="checkTable">
              <tr>
                <td>权利人</td>
                <td colspan="4">
                  <el-input v-model="formInline.name" autocomplete="off"></el-input>
                </td>
              </tr>
              <tr>
                <td>房屋位置</td>
                <td colspan="4">
                  <el-input v-model="formInline.houseLocation" autocomplete="off"></el-input>
                </td>
              </tr>
            </table>
            <el-button type="success" style="width: 100px" @click="addOne('formInline')">添加</el-button>
            <el-button type="danger" style="width: 100px" @click="addState = false">取消</el-button>
          </el-form>
        </el-dialog>
      </div>
      <el-table @row-dblclick="searchPro" v-loading="tableLoding" :data="tempTableData.data" style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column prop="name" label="权利人" align="center"></el-table-column>
        <el-table-column prop="houseLocation" label="房屋位置" align="center"></el-table-column>
        <el-table-column prop="checkTime" label="流转时间" sortable align="center"></el-table-column>
        <el-table-column prop="state" label="图形查看" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)" type="primary">查看</el-button>
          </template></el-table-column>
      </el-table>
      <div class="block" style="background: white">
        <el-pagination @size-change="changePageSize" @current-change="changeCurrentPage" @prev-click="prevPage"
          @next-click="nextPage" :current-page="tempTableData.currentPage" :page-sizes="[5, 10, 15, 20]"
          :page-size="tempTableData.pageSize" layout="total, sizes, prev, pager, next, jumper"
          :total="tempTableData.total"></el-pagination>
      </div>

    </el-card>
    <el-footer> </el-footer>
  </el-container>
</template>

<script>
  import {
    queryAllListApi
  } from "@/api/queryApi";
  import store from "@/vuex/store";
  import config from "@/config/config";
  import {
    getAddressList,
    getChildrenAddress,
    selectByCode,
  } from "@/api/addressDictionary";
  export default {
    data() {
      return {
        addressName: config.addressName,
        addState: false,
        rules: {
          name: [{
            required: true,
            message: "请输入申请人名称",
            trigger: "blur",
          }, ],
        },
        formInline: {
          houseLocation: "",
        },
        townState: true,
        currentCode: store.getters.currentCode,
        uid: store.getters.uid,
        temp_bussi: {
          applyCode: "",
          region: "",
          idCard: "",
          townList: [{
            name: "",
            code: ""
          }],
          villageList: [{
            name: "",
            code: ""
          }],
          name: "",
          currentPage: 1,
          pageSize: 5,
          total: 0,
          townCode: "",
          villageCode: "",
          state: "",
          startDate: "",
          finishDate: "",
        },
        tempTableData: {
          //表格data
          data: [{
              name: "张三",
              idCard: "50011419851011615X",
              houseLocation: "重庆市黔江区城东街道黔江河3组",
              checkTime: "2020-10-12",
            },
            {
              name: "李四",
              idCard: "500114198510117216",
              houseLocation: "重庆市黔江区城东街道",
              checkTime: "2020-10-13",
            },
          ],
          xzjd: "",
          czsq: "",
          state: "",
          currentPage: 1,
          pageSize: 5,
          total: 0,
          type: 0,
        },
        tableLoding: false, //表格加载
        changeRow: [],
        formData: {
          appKey: "",
          appFlag: 2,
          token: store.getters.token,
          versionCode: 0,
          param: "",
        },
        address: [],
      };
    },
    created: function () {
      this.showTown();
      getChildrenAddress(this.currentCode).then((townList) => {
        if (this.currentCode.length > 9) {
          this.temp_bussi.townList = townList.data.data;
        } else {
          this.temp_bussi.villageList = townList.data.data;
        }
      });
      this.queryAllList();
    },
    methods: {
      addOne(formInline) {
        var d = new Date();
        var currentDate =
          d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate();
        let obj = {
          name: this.formInline.name,
          idCard: this.formInline.idCard,
          houseLocation: this.formInline.houseLocation,
          checkTime: this.formInline.checkTime,
          houseType: this.formInline.houseType,
          checkTime: currentDate,
        };
        this.tempTableData.data.push(obj);
        this.addState = false;
        this.$refs[formInline].resetFields();
        (this.formInline.name = ""),
        (this.formInline.idCard = ""),
        (this.formInline.houseLocation = ""),
        (this.formInline.houseType = "");
      },
      getApplyerAddress() {
        selectByCode(this.formInline.villageCode)
          .then((res) => {
            this.addressName += res.data.data;
            this.$forceUpdate();
            this.formInline.houseLocation = this.addressName;
            this.addressName = "重庆市黔江区";
          })
          .catch((err) => {});
      },
      addDetail() {
        this.addState = true;
      },
      handleEdit(index, row) {
        this.$router.push({
          path: "./location",
          query: row,
        });
      },
      dateFilter: function (input) {
        var d = new Date(input);
        var year = d.getFullYear();
        var month =
          d.getMonth() < 9 ? "0" + (d.getMonth() + 1) : "" + (d.getMonth() + 1);
        var day = d.getDate() < 10 ? "0" + d.getDate() : "" + d.getDate();
        return year + "-" + month + "-" + day;
      },
      townChange(index) {
        if (this.formInline.townCode) {
          getChildrenAddress(this.formInline.townCode).then((villageList) => {
            this.temp_bussi.villageList = villageList.data.data;
          });
        }
      },
      queryAllList() {
        // this.tableLoding = true;
        // queryAllListApi(this.temp_bussi)
        //   .then((response) => {
        //     this.tempTableData.data = response.data.data.items;
        //     this.tempTableData.total = response.data.data.total;
        //     this.tableLoding = false;
        //   })
        //   .catch((error) => {
        //     this.$message({
        //       showClose: true,
        //       message: error,
        //       type: "error",
        //     });
        //     this.tableLoding = false;
        //   });
      },

      //搜索
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            queryAllListApi(this.temp_bussi)
              .then((response) => {
                this.tempTableData.data = response.data.data.items;
                this.tempTableData.total = response.data.data.total;
                this.tableLoding = false;
                this.$message({
                  showClose: true,
                  message: "搜索成功",
                  type: "success",
                });
                //this.resetForm(formName);
              })
              .catch((error) => {
                this.$message({
                  showClose: true,
                  message: error.data.respondMessage,
                  type: "error",
                });
              });
          } else {
            return false;
          }
        });
      },
      //导出excel 导出excel 导出excel  config.baseUrl +"query/exportToExcel.do?uid=" + this.uid +"&xzjd=" +this.currentCode
      exportToExcel(formName) {
        window.open(
          config.baseUrl +
          "query/exportToExcel.do?uid=" +
          this.uid +
          "&villageCode=" +
          this.temp_bussi.villageCode +
          "&townCode=" +
          this.temp_bussi.townCode +
          "&applyCode=" +
          this.temp_bussi.applyCode +
          "&name=" +
          this.temp_bussi.name +
          "&idCard=" +
          this.temp_bussi.idCard +
          "&state=" +
          this.temp_bussi.state
        );
      },
      exportFinashExcel() {
        window.open(
          config.baseUrl +
          "query/exportFinashExcel.do?uid=" +
          this.uid +
          "&villageCode=" +
          this.temp_bussi.villageCode +
          "&townCode=" +
          this.temp_bussi.townCode +
          "&applyCode=" +
          this.temp_bussi.applyCode +
          "&name=" +
          this.temp_bussi.name +
          "&idCard=" +
          this.temp_bussi.idCard
        );
      },
      // 清空表单选项
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.$refs[formName].validate((valid) => {
          if (valid) {
            queryAllListApi(this.temp_bussi)
              .then((response) => {
                this.tempTableData.data = response.data.data.items;
                this.tempTableData.total = response.data.data.total;
                this.tableLoding = false;
                this.$message({
                  showClose: true,
                  message: "重置成功",
                  type: "success",
                });
                //this.resetForm(formName);
              })
              .catch((error) => {
                this.$message({
                  showClose: true,
                  message: error.data.respondMessage,
                  type: "error",
                });
              });
          } else {
            return false;
          }
        });
      },
      changePageSize(val) {
        this.temp_bussi.pageSize = val;

        this.tempTableData.state = this.queryAllList();
      },
      changeCurrentPage(val) {
        this.temp_bussi.currentPage = val;
        this.queryAllList();
      },
      prevPage(val) {
        this.temp_bussi.currentPage = val;
        this.queryAllList();
      },
      nextPage(val) {
        this.temp_bussi.currentPage = val;
        this.queryAllList();
      },
      handleSelectionChange(val) {
        this.changeRow = val;
      },
      selectable(row, index) {
        if (row.show == 0) {
          return false;
        } else {
          return true;
        }
      },

      //表格的序号
      indexMethod(index) {
        return index * 2;
      },

      //控制显示乡镇街道显示状态
      showTown() {
        if (this.currentCode.length > 9) {
          this.townState = true;
        } else {
          this.townState = false;
          this.formInline.townCode = this.currentCode;
        }
      },
    },
  };
</script>

<style>
  .el-table--enable-row-hover .el-table__body tr:hover>td {
    background-color: #70b3ff87 !important;
  }

  .headDiv div {
    display: inline-block;
  }

  .el-input--suffix .el-input__inner {
    padding: 0 15px;
  }

  .el-form--inline .el-form-item__label {
    width: 84px;
  }

  .el-form--inline .el-form-item__label {
    font-size: 18px;
  }

  .checkTable {
    border-right: 1pt solid gray;
    border-bottom: 1pt solid gray;
    margin-bottom: 1%;
  }

  .checkTable td {
    border: 1pt solid gray;
    border-bottom: none;
    border-right: none;
    height: 50px;
  }

  .checkTable .el-input .el-input__inner {
    border: none;
  }
</style>